<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>2d变幻</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      h4 {
        margin: 0;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo-x {
        width: 100%;
        height: 40px;
        border: 1px solid black;
        margin-top: 10px;
      }
      .demo {
        width: 20px;
        height: 40px;
        display: inline-block;
        background-color: burlywood;
      }

      .case1-1 {
        transform: translate(20px, 10px);
      }
      .case1-2 {
        transform: translateX(60px);
      }
      .case1-3 {
        transform: translateY(10px);
      }

      .case2-1 {
        transform: rotate(90deg);
      }
      .case2-2 {
        transform: rotate(100grad);
      }
      .case2-3 {
        transform: rotate(1.5708rad);
      }
      .case2-4 {
        transform: rotate(0.25turn);
      }

      .case3-1 {
        transform: scale(0.5);
      }
      .case3-2 {
        transform: scaleX(0.5);
      }
      .case3-3 {
        transform: scaleY(0.5);
      }
      .case3-4,
      .case3-5,
      .case3-6 {
        transition: 1s transform;
      }
      .case3-4:hover {
        transform: scaleX(-1);
      }
      .case3-5:hover {
        transform: scaleY(-1);
      }
      .case3-6:hover {
        transform: scale(-1);
      }

      .case4-1 {
        transform: skew(10deg, 20deg);
      }
      .case4-2 {
        transform: skewX(30deg);
      }
      .case4-3 {
        transform: skewY(30deg);
      }
      .case4-4 {
        display: inline-block;
      }
      .case4-4 .arrow {
        width: 30px;
        height: 20px;
        background-color: burlywood;
      }
      .case4-4 > .arrow:first-child {
        transform: skewX(30deg);
      }
      .case4-4 > .arrow:last-child {
        transform: skewX(-30deg);
      }

      .case5-1 img:first-child{
        width: 100px;
        height: 100px;;
      }
      .case5-1 img:last-child{
        width: 100px;
        height: 100px;
        margin-left: -40px;
      }
      .demo-x input:checked + .case5-1 img:first-child{
        transform: scale(1);
      }
      .case5-2 div{
        width: 20px;
        height: 20px;
        position: fixed;
        bottom: 0px;
        left: 250px;
        background-color: aqua;
      }
      input:checked + .case5-2 {
        transform: scale(1);
      }
      .case5-3 {
        width: 80px;
        height: 80px;
        overflow: hidden;
      }
      .case5-3 img{
        position: absolute;
        width: 100px;
      }
      .demo-x input:checked + .case5-3{
        transform: scale(1);
      }

      .case6-1 {
        transform: rotate(315deg);
      }
      .case6-2{
        transform: rotate(315deg);
        transform-origin: 100% -100%;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./10-box-shadow.html">上一篇</a>
      <a href="./12-calc.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <h4>1、2d变幻不会影响文档流</h4>
    <h4>2、内联元素无效（替换元素除外）</h4>
    <h4>3、按顺序执行；所以书写顺序不同，结果会不同</h4>
    <h4>4、clip/clip-path剪裁，先对原图形剪裁，再变幻</h4>
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>基本变幻-位移</dt>
        <dd>
          1、要注意，translate(20px)是translateX(60px)的缩写，而不是两个方向都有位移
        </dd>
        <dd>
          <div class="demo-x">
            <div class="demo">基准</div>
          </div>
          <div class="demo-x">
            <div class="demo case1-1"></div>
          </div>
          <div class="demo-x">
            <div class="demo case1-2"></div>
          </div>
          <div class="demo-x">
            <div class="demo case1-3"></div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>基本变幻-旋转</dt>
        <dd>
          以下是不同单位
          <br />
          1、deg 角度
          <br />
          2、grad 百分度，400一圈
          <br />
          3、rad 弧度，1弧度等于180/pi
          <br />
          4、turn 圈数
        </dd>
        <dd>
          <div class="demo-x">
            <div class="demo case2-1"></div>
          </div>
          <div class="demo-x">
            <div class="demo case2-2"></div>
          </div>
          <div class="demo-x">
            <div class="demo case2-3"></div>
          </div>
          <div class="demo-x">
            <div class="demo case2-4"></div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>基本变幻-缩放</dt>
        <dd>
          1、scale(2)等同scale(2, 2)，这与位移不同
          2、scaleX(-1)是垂直翻转，scaleY(-1)是水平翻转
        </dd>
        <dd>
          <div class="demo-x">
            <div class="demo case3-1"></div>
          </div>
          <div class="demo-x">
            <div class="demo case3-2"></div>
          </div>
          <div class="demo-x">
            <div class="demo case3-3"></div>
          </div>
          <div class="demo-x">
            <div class="demo case3-4"></div>
            <div class="demo case3-5"></div>
            <div class="demo case3-6"></div>
            hover以翻转
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>基本变幻-斜切</dt>
        <dd>
          1、skew(2)等同skew(2, 0)，语法与位移相同
        </dd>
        <dd>
          <div class="demo-x">
            <div class="demo case4-1"></div>
          </div>
          <div class="demo-x">
            <div class="demo case4-2"></div>
          </div>
          <div class="demo-x">
            <div class="demo case4-3"></div>
          </div>
          <div class="demo-x">
            <div class="case4-4">
              <div class="arrow"></div>
              <div class="arrow"></div>
            </div>
            用来做箭头
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>使用transform后产生新特性</dt>
        <dd>
          1、创建新的层叠上下文
          <div class="demo-x" style="height: 120px">
            <input type="checkbox">给第一个图片添加样式scale(1)
            <div class="case5-1">
              <img src="../../Source/border-image.png"></img>
              <img src="../../Source/pic.jpg"></img>
            </div>
          </div>
        </dd>
        <dd>
          2、孩子的固定定位失效
          <div class="demo-x">
            <input type="checkbox">给父元素加入scale(1)
            <div class="case5-2">
              <div>固</div>
            </div>
          </div>
        </dd>
        <dd>
          3、影响overflow
          <br>
          ps: css2.1规定——overflow不为visible的祖先元素对绝对定位子孙无影响，除非中间有position: static;（当然，现在就连position中都有破坏该规则的属性）
          <div class="demo-x" style="height: 120px">
            <input type="checkbox">给祖先元素加入scale(1)
            <div class="case5-3">
              <img src="../../Source/pic.jpg"></img>
            </div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>transform-origin</dt>
        <dd>
          1、默认值：相对于元素的中心点<br>
          2、参考系：左上角(0,0)，右、下为正方向
        </dd>
        <dd>
          <div class="demo-x">
            <div class="demo">基准</div>
          </div>
          <div class="demo-x">
            <div class="demo case6-1">转315°</div>
          </div>
          <div class="demo-x">
            <div class="demo case6-2">转315°</div>
            改了中心点后
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>translate/rotate/scale函数可以脱离transform独立使用</dt>
        <div class="demo-x">
          <div class="demo" style="translate: 10px;"></div>
        </div>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
